<template>
	<view class="logon">
		<view class="list">
			<view class="list-call">
				<input class="phone" type="phone" v-model="phone" maxlength="11" placeholder-style="color:#CCCCCC" placeholder="请输入手机号" />

				<view @tap="getPhoneCode" v-bind:class="[isTrue ? 'getCodeBtn' : 'unGet']">
					{{phoneCode}}
				</view>
			</view>
			<view class="list-call">
				<input class="biaoti" type="text" v-model="pwd" maxlength="6" placeholder-style="color:#CCCCCC" placeholder="请输入验证码" />
			</view>
		</view>
		<view class="btn" @tap="weixinLoin">
			登录
		</view>
		<view class="uni-text">
			<text></text>
			<text @tap="goPhonePage">密码登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: false,
				phoneCode: "获取验证码",
				isTrue: true,
				phone: "",
				pwd: ""
			}
		},
		methods: {
			
			getPhoneCode() {
				if (this.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return false;
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请输入正确得手机号',
						icon: 'none'
					})
					return false;
				} else {
					if (this.isTrue == true) {
						this.phoneCode = '60s'
						let time = 60;
						this.isTrue = false;
						var _this = this;
						var timer = setInterval(function() {
							time--
							_this.phoneCode = time + 's'
							if (time == 0) {
								clearInterval(timer)
								_this.phoneCode = '获取验证码';
								_this.isTrue = true;
							}
						}, 1000)
					}

					let data = {
						type: 1,
						mobile: this.phone
					}
					this.$http.post(this.$http.baseUrl + '/api/v1.0/sendMessage', data, res => {
						console.log(res.data)
						if (res.data.status == '000000') {
							uni.showToast({
								title: '验证码已下发，请注意查收',
								icon: 'none'
							})
						}
					})
				}

			},
			goPhonePage() {

				uni.redirectTo({
					url: '/pages/login/phoneLogin'
				});
			},
			weixinLoin(e){
				let _this = this;
				if(this.phone.length == 0){
					uni.showToast({
						title:"手机号码不能为空",
						icon:"none"
					})
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
							uni.showToast({
								 title: '请输入正确得手机号',
								 icon: 'none'
							})
					        return false; 
				}
				if(this.pwd.length == 0){
					uni.showToast({
						title:"验证码不能为空",
						icon:"none"
					})
					return false
				}
				uni.login({
				  provider: _this.loginProvider,
				  success: function (loginRes) {
				    console.log(loginRes);
					let data = {
						code:loginRes.code,
						mobile: _this.phone,
						mobileCode:_this.pwd
					}
					_this.$http.post('/api/v1.0/appletMobileLogin',data,res=>{
						if(res.data.status == '000000'){
							uni.setStorage({
								key:'userId',
								data:res.data.data.userId,
							})
							uni.setStorage({
								key:'token',
								data:res.data.data.token,
							})
							uni.setStorage({
								key:'nickName',
								data:res.data.data.nickName,
							})
							uni.setStorage({
								key:'buyerAccountId',
								data:res.data.data.buyerAccountId,
							})
							uni.setStorage({
								key:'userLogo',
								data:res.data.data.logo,
							})
							uni.setStorage({
								key:'phone',
								data:res.data.data.mobile,
							})
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else if(res.data.status == '009123'){
							uni.showToast({
								title:'该账号未注册！',
								icon:"none"
							})
						}else if(res.data.status == '009124'){
							uni.showToast({
								title:'当前登录账号与绑定手机号不一致！',
								icon:"none"
							})
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
						
						
					})
				  }
				});
				
			},
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		margin-top: 70upx;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;

		.list-call {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: #333333;
			font-size: 28upx;
			border-bottom: 1upx solid rgba(217, 217, 217, 1);

			.img {
				width: 40upx;
				height: 40upx;
			}

			.phone {
				padding-left: 16upx;
				width: 60%;
			}

			.getCodeBtn {
				color: #EA4E39;
				float: right;
				margin-right: 20upx;
			}

			.unGet {
				color: #D9D9D9;
				float: right;
				margin-right: 20upx;
			}

			.biaoti {
				flex: 1;
				text-align: left;
				line-height: 100upx;
				padding-left: 16upx;
			}
		}
	}

	.btn {
		width: 616upx;
		height: 88upx;
		background: linear-gradient(360deg, rgba(227, 67, 57, 1) 0%, rgba(249, 98, 58, 1) 100%);
		border-radius: 20upx;
		font-size: 36upx;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50upx auto 30upx;
	}

	.uni-text {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 70upx;
		font-size: 24upx;
		font-weight: 500;
		color: rgba(77, 77, 77, 1);
	}
</style>
